<div nz-form [formGroup]="validateForm">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>标题</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="标题" [formControlName]="'documentTitle'"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>产品</nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="24">
          <nz-select [formControlName]="'productId'" nzShowSearch>
            <nz-option nzValue="" nzLabel="请选择"></nz-option>
            <nz-option [nzValue]="p.pid" [nzLabel]="p.productName" *ngFor="let p of allProducts"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
    </div>
    <div nz-col [nzSpan]="6" class="search-area">
      <button nz-button (click)="search()">Search</button>
      <button nz-button (click)="resetForm()">Clear</button>
      <button nz-button [nzType]="'primary'" routerLink="./edit">Add</button>
    </div>
  </div>
</div>
<nz-spin [nzSpinning]="loading" [nzDelay]="500">
  <nz-list nzItemLayout="vertical">
    <nz-list-item *ngFor="let i of documentList;let index=index" (click)="showDocument(i.pid)">
        <nz-list-item-meta>
          <nz-list-item-meta-avatar>
            <div class="avatar">{{i.documentTitle.substr(0, 1)}}</div>
          </nz-list-item-meta-avatar>
          <nz-list-item-meta-title>
            {{i.documentTitle}}
          </nz-list-item-meta-title>
          <nz-list-item-meta-description>
            {{i.productName}}
          </nz-list-item-meta-description>
        </nz-list-item-meta>
        {{i.documentPlainText}}
        <nz-list-item-extra>
          <div class="no-pic-div" *ngIf="!i.imgIds || i.imgIds.length === 0">{{index + 1}}</div>
          <img width="130" alt="logo" [src]="imgDownloadUrl+'/'+i.imgIds[0]" *ngIf="i.imgIds && i.imgIds.length"/>
        </nz-list-item-extra>
      <ul nz-list-item-actions>
        <nz-list-item-action>{{i.releaseTime | shortTime}}</nz-list-item-action>
        <nz-list-item-action>{{i.createUserName}}</nz-list-item-action>
      </ul>
    </nz-list-item>
  </nz-list>
  <nz-pagination [nzPageIndex]="current" [nzTotal]="total" (nzPageIndexChange)="pageChange($event)"
                 [nzPageSize]="pageSize"></nz-pagination>
</nz-spin>
